<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>首页</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
</head>
<body>
<div id="wrap">
    <div id="top_content">
        <div id="header">
            <div id="rightheader">
                <p>
                    <span id="welcome"></span>&nbsp;&nbsp;&nbsp;&nbsp;
                    <span><a href="/">退出</a></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <span id="localdate"></span><br/>
                </p>
            </div>
            <div id="topheader">
                <h1 id="title">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">首页</a>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="../player/signupList.html">报名列表</a></h1>
            </div>
            <div id="navigation"></div>
        </div>
        <div id="content">
            <p id="whereami">
            </p>
            <h1>用户列表</h1>
            <table class="table">
                <thead>
                    <tr class="table_header">
                        <td>ID</td>
                        <td>项目名</td>
                        <td>剩余名额</td>
                        <td>开始时间</td>
                        <td>地点</td>
                        <td>操作</td>
                    </tr>
                </thead>
                <tbody id="events">
                </tbody>
            </table>
            <p><input type="button" class="button" value="返回" onclick="location='toAddPro.do'"/></p>
        </div>
    </div>
    <div id="footer">
        <div id="footer_bg">ABC@126.com</div>
    </div>
</div>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">

    let map = {};
    fillCustomMessage();
    showEvents();

    $.get({url: "/name?studentId=" + map.id, success(data) {$("#welcome").html("欢迎：<a href='/player/modifyInfo.html'  style='color: #ffffff'>" + data + "</a>")}})

    // 获取当前日期
    $("#current_time").text(map.time);

    // 读取cookie并写入到map
    function fillCustomMessage() {
        // let map = {}
        let messages = document.cookie.split("; ");
        for (let i = 0; i < messages.length; i++) {
            let ms = messages[i].split("=");
            map[ms[0]] = ms[1];
        }
        // $("#title").text(map.message);
        $("#footer_bg").text(map.email);
        $("#localdate").text(map.time);
    }

    // 展示运动项目
    function showEvents() {
        let context = $("#events");
        context.empty();
        fillContext();
    };

    function fillContext() {
        let context = $("#events");
        $.get({
            url: "/event/getPage?pn=1",
            success(data) {
                $.each(data, function (index, element) {
                    context.append("<tr class=" + (index % 2 == 0 ? "row1": "row2") +">\n" +
                        "    <td>" + (index + 1) +  "</td>\n" +
                        "    <td>" + element.name +  "</td>\n" +
                        "    <td>" + element.quota +  "</td>\n" +
                        "    <td>" + new Date(element.time).toLocaleDateString() + "</td>\n" +
                        "    <td>" + element.location + "</td>\n" +
                        "    <td>\n" +
                        "        <a href=# onclick=signup(" + element.id + ")>报名</a>&nbsp;\n" +
                        "    </td>\n" +
                        "</tr>");
                });
            },error() {
                alert("网络异常！！！");
            }
        });
        $("#content").trigger("create");
    }

    // 报名
    function signup(eventId) {
        // 判断是否已报名
        $.post({
            url: "/event/signup",
            data: {
                "studentId": map.id,
                "eventId": eventId,
            }, success(data) {
                console.log(data);
                alert(data.message);
                if (data == 200) {
                    // 报名成功
                    changeStatus(map.id);

                }
            }, error(data) {
                console.log(data);
            }
        });
    }

    // 判断该学生报名的项目
    // function changeStatus() {
    //     $.get({
    //         url: "/event/getStatus?studentId=" + map.id,
    //     });
    // }

</script>
</body>
</html>

